import React, {FC} from "react";
import {Outlet} from "react-router-dom";
import styles from "./MainLayout.module.scss"
//这个组件的存在是为了页面而存在的，因为每个页面存在相同的东西，所以使用layout进行复用
import { Layout, Menu, Spin, theme} from 'antd';
import Logo from "../components/Logo";
import UserInfo from "../components/UserInfo";
import useLoadingUserData from "../hooks/useLoadingUserData";
import useNavPage from "../hooks/useNavPage";

// 获取当前时间
const now = new Date();

// 获取年份和月份
const year = now.getFullYear()+10; // 获取当前年份，比如 2023
const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 获取当前月份，并补齐两位数

// 格式化为年月格式
const result = `${year}-${month}`;

const { Header, Content, Footer } = Layout;
const MainLayout :FC=()=>{
    const {waiting } =useLoadingUserData();
    useNavPage(waiting);
    return(
        <Layout>
            <Header className={styles.header}>
                <div className={styles.left}>
                    <Logo/>
                </div>
                <div className={styles.right}>
                    <UserInfo ></UserInfo>
                </div>
            </Header>
            <Content className={styles.content}>
                {waiting ?<div style={{textAlign:"center",marginTop:"80px"}}>
                    <Spin/>
                </div>:<Outlet/>}
            </Content>
            <Footer className={styles.footer}>
                妖妖问卷 &copy; 2022-1 : {result} Create by xiaohu
            </Footer>
        </Layout>
    )
}

export  default MainLayout;